<template>
  <div class="oj-main-layout">
    <div class="oj-main-layout-header" :class="{ 'blur-effect': isScrolled }">
      <div class="oj-main-layout-nav">
        <Navbar></Navbar>
      </div>
    </div>
    <div v-if="$route.meta.showBanner" style="padding: 0 60px">
      <img src="@/assets/images/log-banner.png" class="banner-img" />
    </div>
  </div>
  <div style="padding: 0 60px">
    <RouterView />
  </div>
  <app-footer></app-footer>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Navbar from '@/components/Navbar.vue'
import AppFooter from '@/components/AppFooter.vue'

const isScrolled = ref(false)
let ticking = false

const handleScroll = () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 当滚动超过 10px 时启动模糊效果
      isScrolled.value = window.scrollY > 10
      ticking = false
    })
    ticking = true
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0;
}

.oj-main-layout {
  // background-color: #f7f7f7;
  padding-top: 80px;

  .banner-img {
    max-width: 1520px;
    margin: 0 auto;
    border-radius: 16px;
    width: 100%;
  }

  .oj-main-layout-header {
    height: 60px;
    position: fixed;
    width: 100%;
    background: transparent; /* 与滚动条背景色保持一致 */
    left: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: all 0.3s ease; /* 添加过渡动画 */

    /* 液态玻璃效果 */
    &.blur-effect {
      backdrop-filter: blur(10px) saturate(180%); /* 液态玻璃模糊和饱和度 */
      -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 兼容 */
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 100%
      ); /* 渐变玻璃背景 */
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        /* 主阴影 */ inset 0 1px 0 rgba(255, 255, 255, 0.3),
        /* 内发光 */ 0 0 0 1px rgba(255, 255, 255, 0.1); /* 外边框光效 */
    }
  }

  .oj-main-layout-nav {
    width: 100%;
    height: 60px;
    background: transparent; /* 与滚动条背景色保持一致 */
  }

  // banner 图
  .oj-ship-banner {
    max-width: 1520px;
    min-width: 1520;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    height: 350px;
    // width: 1677px;
    color: #ffffff;
    background: url('@/assets/index_bg.png') left top no-repeat;
    background-size: cover;
    overflow: hidden;
  }
}
</style>
